<template>
  <section class="flights">
    <el-row type="flex" justify="space-between">
      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <!-- 过滤条件 -->
        <div>
          <flightsFilter 
            :options="ticketList.options" 
            :flights="cacheTicketList"
            v-if="ticketList.options"
            @setTicketList="setTicketList"
          />
        </div>

        <!-- 航班头部布局 -->
        <div>
          <flightsListHead />
        </div>

        <!-- 航班信息 -->
        <div>
          <flightsItem :data="item" v-for="item in pagList" :key="item.id" />

          <div class="noPage" v-if="ticketList.flights && ticketList.flights.length===0">
            <img src="@/static/logo.png" alt />
            <div>暂无符合条件的机票信息，请重新搜索！</div>
          </div>

          <el-pagination
            v-if="ticketList.flights"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="pageSize"
            :page-sizes="[4, 6, 8, 10]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="ticketList.flights.length"
          ></el-pagination>
        </div>
      </div>

      <!-- 侧边栏 -->
      <div class="aside">
        <flightsAside />
      </div>
    </el-row>
  </section>
</template>

<script>
import moment from "moment";
import flightsListHead from "@/components/air/flightsListHead";
import flightsItem from "@/components/air/flightsItem";
import flightsFilter from "@/components/air/flightsFilter";
import flightsAside from "@/components/air/flightsAside";

export default {
  components: {
    flightsListHead,
    flightsItem,
    flightsFilter,
    flightsAside
  },

  data() {
    return {
      ticketList: {},
      // 保存缓存机票列表
      cacheTicketList: {},
      // 分页数据(由于利用计算属性，这里可以删除掉)
      // pagList: [],
      pageIndex: 1,
      pageSize: 10
    };
  },

  created() {
    this.getLists();
  },

  // 这里利用计算属性来返回pagList监听后遍历即可
  computed: {
    pagList() {
      // 如果没有数据返回空数组
      // 计算属性需要声明pagList为空数组
      if (!this.ticketList.flights) {
        return [];
      }

      const beginIndex = (this.pageIndex - 1) * this.pageSize;
      const endIndex = beginIndex + this.pageSize;
      // 这里将pagList 返回出来
      return this.ticketList.flights.slice(beginIndex, endIndex);
    }
  },

  watch: {
    // 监听路由变化，从而刷新页面的请求
    $route(){
      // console.log('网址发生变化了');
      this.getLists();
    }
  },

  methods: {
    // 发送请求获取机票列表数据
    getLists() {
      this.$axios({
        url: "/airs",
        params: this.$route.query
      }).then(res => {
        console.log("机票列表返回结果", res);
        this.ticketList = res.data;
        // 将飞机票列表先缓存起来
        this.cacheTicketList = res.data.flights;
        // console.log('缓存的机票列表',this.cacheTicketList);

        // 【One】初始将总数据截取第一页展示【后期利用计算属性返回pagList监听后遍历即可】
        // const beginIndex = (this.pageIndex - 1) * this.pageSize;
        // const endIndex = beginIndex + this.pageSize;
        // this.pagList = this.ticketList.flights.slice(beginIndex, endIndex);
      });
    },

    // 切换条数触发
    handleSizeChange(val) {
      // console.log('修改每页页数',val);
      // 将修改每页条数的值，复制给声明的每页条数，从而实现数据绑定
      this.pageSize = val;

      // 【Two】切换条数时触发数据改变【后期利用计算属性返回pagList监听后遍历即可】
      // const beginIndex = (this.pageIndex - 1) * this.pageSize;
      // const endIndex = beginIndex + this.pageSize;
      // this.pagList = this.ticketList.flights.slice(beginIndex, endIndex);
    },

    // 切换页数触发
    handleCurrentChange(val) {
      // console.log('修改分页',val);
      // 将修改分页的值，复制给声明的页码，从而实现分页数据绑定
      this.pageIndex = val;

      // 【Three】切换页数时触发数据改变【后期利用计算属性返回pagList监听后遍历即可】
      // const beginIndex = (this.pageIndex - 1) * this.pageSize;
      // const endIndex = beginIndex + this.pageSize;
      // this.pagList = this.ticketList.flights.slice(beginIndex, endIndex);
    },

    // 筛选
    setTicketList(newLists){
      this.ticketList.flights = newLists;
    }
  }
};
</script>

<style scoped lang="less">
.flights {
  width: 1000px;
  margin: 20px auto;
}

.flights-content {
  width: 745px;
  font-size: 14px;

  .noPage {
    margin-left: 250px;
    margin-bottom: 150px;

    img {
      width: 200px;
      height: 200px;
      object-fit: cover;
      margin-left: 18px;
    }
  }
}

.aside {
  width: 240px;
}
</style>